<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"
/>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css"
/>
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css"
/>
<link rel="stylesheet" href="plugins/parsleyjs/parsley.css" type="text/css"
/>
<link rel="stylesheet" href="less/app.css" type="text/css" />
<!--[if lt IE 9]>
    <script src="plugins/ie/html5shiv.js"></script>
    <script src="plugins/ie/respond.min.js"></script>
    <script src="plugins/ie/excanvas.js"></script>
  <![endif]-->
<style type="text/css">
  #panel {
    position: absolute;
    background-color: white;
    max-height: 90%;
    overflow-y: auto;
    top: 10px;
    right: 10px;
    width: 280px;
  }
</style>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.2&key=375baa190cd4cf5709afb11d2c6c89f9&plugin=AMap.Geocoder"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div id="container"></div>
<div id="panel"></div>
<div style="z-index:100;position: absolute;margin-left: 80px;margin-top: 20px;">
  <input type="text" id="queryAddress">
  <input type="button" onclick="query()" value="搜索">
</div>
<div class="cashDispatch" style="display:none;">
  <form class="form-horizontal" id="redForm" style="overflow: hidden;"
    method="post" enctype="multipart/form-data">
    <div class="col-sm-6 m-t-sm">
      <div class="form-group">
        <label for="voucherChoose" class="col-sm-4 control-label necessary_front">选择红包类型</label>
        <div class="col-sm-8">
          <select class="form-control" name="redType" id="redType" data-parsley-required
            data-parsley-trigger="change">
            <option value=""></option>
            <option value="0">现金红包</option>
            <option value="21">代金券红包</option>
            <option value="22">精灵豆红包</option>
          </select>
        </div>
      </div>
    </div>

    <div class="col-sm-6 m-t-sm">
      <div class="form-group">
        <label for="address" class="col-sm-4 control-label necessary_front">
          文本地址
        </label>
        <div class="col-sm-8">
          <select class="form-control" id="address" name="address"></select>
        </div>
      </div>
    </div>
    <div class="col-sm-6 m-t-sm">
      <div class="form-group">
        <label for="longitude" class="col-sm-4 control-label necessary_front">
          经度
        </label>
        <div class="col-sm-8">
          <input type="text" id="longitude" class="form-control" name="longitude"
            readonly/>
        </div>
      </div>
    </div>
    <div class="col-sm-6 m-t-sm">
      <div class="form-group">
        <label for="latitude" class="col-sm-4 control-label necessary_front">
          纬度
        </label>
        <div class="col-sm-8">
          <input type="text" class="form-control" id="latitude" name="latitude"
            readonly/>
        </div>
      </div>
    </div>

    <div class="col-sm-6 m-t-sm">
      <div class="form-group">
        <label for="ReceiveRequire" class="col-sm-4 control-label necessary_front">限制条件</label>
        <div class="col-sm-8">
          <select class="form-control" id="ReceiveRequire" name="ReceiveRequire"
            data-parsley-required data-parsley-trigger="change">
            <option selected value='0'>全部可领取</option>
            <option value='1'>仅"男"可领取</option>
            <option value='2'>仅"女"可领取</option>
          </select>
        </div>
      </div>
    </div>
    <div class="col-sm-6 m-t-sm">
      <div class="form-group">
        <label for="receiveRange" class="col-sm-4 control-label necessary_front">可领取范围/米</label>
        <div class="col-sm-8">
          <input type="text" data-parsley-type="number" min="50" class="form-control"
            id="receiveRange" name="receiveRange" placeholder="可领取范围需大于等于50"
            data-parsley-required data-parsley-trigger="change"
          />
        </div>
      </div>
    </div>
    <div class="clearfix"></div>
    <div class="m-l-md">
      <span class=" h5 text-danger m-l-xs">红包详情</span>
      <div class="line line-dashed"></div>
    </div>
    <div class="redDetail">

    </div>
    <div class="clearfix"></div>
    <div class="line line-dashed m-l-md"></div>
    <div class="col-sm-6 m-t-sm">
      <div class="form-group">
        <label for="proPic" class="col-sm-4 control-label necessary_front">添加宣传图</label>
        <div class="col-sm-5">
          <input type="button" id="proPic" class="text-center form-control btn-s btn-primary necessary_front"
            value="上传图片" data-upload="image" data-input="[name=redClue]"
          />
          <input type="hidden" name="redClue" data-parsley-required data-parsley-trigger="change"
          />
        </div>
      </div>
    </div>
    <div class="col-sm-6 m-t-sm">
      <div class="form-group">
        <label for="redURL" class="col-sm-4 control-label">添加h5链接</label>
        <div class="col-sm-5">
          <input type="text" data-parsley-type="url" id="redURL" class="form-control"
            name="redURL" />
        </div>
      </div>
    </div>
    <div class="col-sm-12 m-t-sm">
      <div class="form-group">
        <label for="remark" class="col-sm-2 control-label">说明</label>
        <div class="col-sm-10">
          <textarea id="remark" name="remark" class="form-control" rows="3"></textarea>
        </div>
      </div>
    </div>
  </form>
</div>

<!-- Bootstrap -->
<script src="js/bootstrap.js"></script>
<!--引入layer-->
<script src="plugins/layer/layer.js"></script>
<script src="plugins/parsleyjs/parsley.min.js"></script>
<script src="plugins/parsleyjs/i18n/zh_cn.js"></script>

<script src="plugins/common.js"></script>

<script type="text/javascript">
  var map = new AMap.Map("container", {
    resizeEnable: true
  });

  function query() {
    var address = $("#queryAddress").val();
    AMap.service(["AMap.PlaceSearch"], function () {
      var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
        pageSize: 5,
        pageIndex: 1,
        city: "010", //城市
        map: map,
        panel: "panel"
      });
      //关键字查询
      placeSearch.search(address);
    });
  }

  //为地图注册click事件获取鼠标点击出的经纬度坐标
  var clickEventListener = map.on('click', function (e) {
    lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];
    var geocoder = new AMap.Geocoder({
      pageSize: 50,
      radius: 500,
      extensions: "all"
    });
    geocoder.getAddress(lnglatXY, function (status, result) {
      if (status === 'complete' && result.info === 'OK') {
        var Address = result.regeocode.pois;
        var P = document.getElementById("address");
        while (P.hasChildNodes()) {
          P.removeChild(P.firstChild);
        }
        for (var i = 0; i < Address.length; i++) {
          var optionl = document.createElement("option");
          optionl.innerHTML = Address[i].name;
          optionl.value = Address[i].name;
          P.appendChild(optionl);
        }
      }
    });
    $("#longitude").val(e.lnglat.getLng())
    $("#latitude").val(e.lnglat.getLat())
    layer.open({
      type: 1,
      title: '发布红包',
      area: ['830px'],
      offset: '50px',
      shadeClose: true,
      btn: ['确定'],
      maxmin: true,
      content: $('.cashDispatch'),
      success: function () {
      },
      yes: function (i) {
        if (parseFloat($("#redAmount").val()) / parseInt($("#redNum").val()) < 0.1) {
          layer.msg('每个人领取的红包最小数不能少于0.1元', { time: 2000 });
          $("#redAmount").val("");
          return;
        }
        if (parseInt($("#jldTotal").val()) < parseInt($("#jldNum").val())) {
          layer.msg('总人数不能大于精灵豆总个数', { time: 2000 });
          $("#jldNum").val("");
          return;
        }
        var flag = validated($("#redForm"));
        if (flag) {
          $('[disabled=disabled]').removeAttr('disabled');
          var formData = $("#redForm").serialize();
          $('#redType').attr('disabled', 'disabled');
          $('#voucherChoose').attr('disabled', 'disabled');
          // var formData = new FormData($("#redForm")[0]);
          loadIndex = layer.load();
          $.ajax({
            type: "post",
            url: "authenticateRedBagAdd.do",
            data: formData,
            // contentType: false,
            // processData: false,
            // cache: false,
            success: function (on) {
              if (on == "0") {
                layer.msg('发放成功', { time: 2000 }, function () {
                  layer.close(i);
                });
              } else if (on == "1") {
                layer.msg('上传宣传图片异常', { time: 2000 });
              } else if (on == "2") {
                layer.msg('红包类型错误', { time: 2000 });
              } else if (on == "3") {
                layer.msg('创建红包失败', { time: 2000 });
              } else if (on == "4") {
                layer.msg('创建订单失败', { time: 2000 });
              } else if (on == "5") {
                layer.msg('支付异常', { time: 2000 });
              } else if (on == "6") {
                layer.msg('代金券扣除异常', { time: 2000 });
              } else if (on == "7") {
                layer.msg('solr添加异常', { time: 2000 });
              } else if (on == "8") {
                layer.msg('缓存添加异常', { time: 2000 });
              } else if (on == "9") {
                layer.msg('余额不足', { time: 2000 });
              } else {
                layer.msg('未知原因导致红包发放失败！请联系开发人员！' + on, { time: 2000 });
              }
            },
            error: function (xhr) {
              console.log(xhr);
            },
            complete: function () {
              layer.close(loadIndex);
            }
          })
        }
      }
    })
  });

</script>

<script>
  $(function () {
    $('#queryAddress').bind('keypress', function (event) {
      if (event.keyCode == "13") {
        query();
      }
    });

    $('#redType').change(function () {
      $('.redDetail').children().remove();
      var type = $(this).val();
      switch (type) {
        case '0':
          $('.redDetail').append(`<div class="col-sm-6 m-t-sm">
        <div class="form-group">
          <label for="redAmount" class="col-sm-4 control-label necessary_front">
            红包总金额
          </label>
          <div class="col-sm-8">
            <input type="text" data-parsley-type="number" min="0.1" class="form-control"
              id="redAmount" name="redAmount" placeholder="需大于等于0.1"
              data-parsley-required data-parsley-trigger="change"
            />
          </div>
        </div>
      </div>
      <div class="col-sm-6 m-t-sm">
        <div class="form-group">
          <label for="redNum" class="col-sm-4 control-label necessary_front">
            总人数
          </label>
          <div class="col-sm-8">
            <input type="text" data-parsley-type="integer" min="1" class="form-control"
              id="redNum" name="redNum" placeholder="总金额/总人数需大于等于0.1"
              data-parsley-required data-parsley-trigger="change"
            />
          </div>
        </div>
      </div>`);
          break;
        case '21':
          $('.redDetail').append(`<div class="col-sm-6 m-t-sm">
              <div class="form-group">
                <label for="voucherChoose" class="col-sm-4 control-label necessary_front">选择代金券</label>
                <div class="col-sm-8">
                  <select class="form-control" id="voucherChoose" name="voucher"
                    data-parsley-required data-parsley-trigger="change">
                    <option value=""></option>
                    <option value="0">满200-100</option>
                    <option value="1">满300-100</option>
                    <option value="2">满500-100</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="col-sm-6 m-t-sm">
              <div class="form-group">
                <label for="djqNum" class="col-sm-4 control-label necessary_front">
                  代金券总张数
                </label>
                <div class="col-sm-8">
                  <input type="text" data-parsley-type="integer" min="1" class="form-control"
                    id="djqNum" name="redNum" placeholder="整数，需大于等于1"
                    data-parsley-required data-parsley-trigger="change"
                  />
                </div>
              </div>
            </div>`);
          break;
        case '22':
          $('.redDetail').append(`<div class="col-sm-6 m-t-sm">
              <div class="form-group">
                <label for="jldTotal" class="col-sm-4 control-label necessary_front">
                  精灵豆总个数
                </label>
                <div class="col-sm-8">
                  <input type="text" data-parsley-type="integer" min="1" class="form-control"
                    id="jldTotal" name="legumesAmount" placeholder="整数，需大于1"
                    data-parsley-required data-parsley-trigger="change"
                  />
                </div>
              </div>
            </div>
            <div class="col-sm-6 m-t-sm">
              <div class="form-group">
                <label for="jldNum" class="col-sm-4 control-label necessary_front">
                  总人数
                </label>
                <div class="col-sm-8">
                  <input type="text" data-parsley-type="integer" min="1" class="form-control"
                    id="jldNum" name="redNum" placeholder="总人数需小于等于精灵豆总个数"
                    data-parsley-required data-parsley-trigger="change"
                  />
                </div>
              </div>
            </div>`);
          break;
      }
    })

    /**
     * 修改红包 二次发放
     * updateType 红包类型 0 现金 21代金券 22精灵豆
     * djqType 代金券原始类型 option-value
     * updateId 红包ID type=hidden
     */
    var updateType = 21,
      djqType = 1;

    if (updateType) {
      $('#redType').val(updateType).attr('disabled', true);
      $('#redType').trigger('change');
      switch (updateType) {
        case 21:
          $('#voucherChoose').val(djqType).attr('disabled', true);
          break;
      }
    }
  })
</script>